<template>
  <div class="rule-configuration">
    <el-dialog title="规则配置" v-model="dialogVisible" width="50%" :before-close="handleClose">
      <div class="content">
        <el-form :model="form" label-width="180px" label-position="left" ref="formRef">
          <el-form-item label="创建方式">
            <el-radio-group v-model="createType">
              <el-radio-button label="1" border>新建项目</el-radio-button>
              <el-radio-button label="2" border>已有项目</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="项目生成规则" class="set-rules-item" v-if="createType === '1'">
            <el-radio-group v-model="project">
              <el-radio-button label="1">
                <span>指定数量</span>
                <span>手动指定每个账户的项目数量</span>
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="createType === '1'"
            label="每个账户指定项目数"
            prop="projectNum"
            class="set-rules-input"
            :rules="[
              { required: true, message: '请输入项目数', trigger: 'blur' },
              { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
              { pattern: /^([1-9]|[12][0-9]|30)$/, message: '请输入1-30之间的数字', trigger: 'blur' }
            ]"
          >
            <el-input v-model="form.projectNum" type="number" placeholder="请输入项目数" />
          </el-form-item>

          <el-form-item label="广告生成规则" class="set-rules-item advertising-rules">
            <el-radio-group v-model="form.projectAdRule">
              <el-radio-button label="1">
                <span>按创意组数</span>
                <span>基于创意组数生成广告，自动匹配标题包，标题包不足时循环使用</span>
              </el-radio-button>
              <el-radio-button label="2">
                <span>按创意组*标题包</span>
                <span>基于创意组*标题包自动生成广告</span>
              </el-radio-button>
              <el-radio-button label="3">
                <span>指定数量</span>
                <span>先基于创意组数生成广告，未达到指定生成的广告数量时，循环使用创意组；超过，则舍弃多余广告</span>
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            prop="promotionNum"
            width="200px"
            class="set-rules-input"
            v-if="form.projectAdRule === '3'"
            :rules="[
              { required: true, message: '请输入广告数', trigger: 'blur' },
              { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
              { pattern: /^([1-9][0-9]?|100)$/, message: '请输入1-100之间的数字', trigger: 'blur' }
            ]"
          >
            <template #label>
              <span>每个创意组指定广告数</span>
              <el-icon><QuestionFilled /></el-icon>
            </template>
            <el-input v-model="form.promotionNum" type="number" placeholder="请输入广告数" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['isRuleConfiguration', 'ruleSettingData', 'ruleSettingMap', 'isStrategy', 'projectId']);
const emit = defineEmits(['closeRuleConfiguration', 'update:isRuleConfiguration', 'ruleSettingData']);
const dialogVisible = ref(false);
const formRef = ref();
const ruleConfiguration = ref('1');
const createType = ref('1');
const project = ref('1');
const form = reactive({
  projectAdRule: '1',
  projectNum: '1',
  promotionNum: '100'
});
// const rules = reactive({
//   projectNum: [{ required: true, message: '请输入项目数', trigger: 'blur' }],
//   desc: [{ required: true, message: '请输入广告数', trigger: 'blur' }]
// });
const handleClose = () => {
  emit('update:isRuleConfiguration', false);
  dialogVisible.value = false;
};
watch(
  () => props.isRuleConfiguration,
  (newVal) => {
    dialogVisible.value = newVal;
    // createType.value = props.isStrategy ? '2' : '1';
    console.log(props.projectId,'props.projectId');
    if (props.projectId) {
      createType.value = '2';
    }
  }
);
// 监听ruleSettingMap
watch(
  () => props.ruleSettingMap,
  (newVal) => {
    if (newVal) {
      form.projectAdRule = newVal.projectAdRule;
      form.projectNum = newVal.projectNum;
      form.promotionNum = newVal.promotionNum;
    }
  },
  { immediate: true }
);
const handleConfirm = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      emit('ruleSettingData', form);
      emit('update:isRuleConfiguration', false);
      dialogVisible.value = false;
    }
  });
};
</script>

<style scoped lang="scss">
.rule-configuration {
  :deep(.el-dialog) {
    height: 500px !important;
  }
  :deep(.dialog-footer) {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.set-rules-item {
  .el-radio-group {
    :deep(.el-radio-button__inner) {
      display: flex;
      flex-direction: column;
    }

    span {
      white-space: normal; /* 允许换行 */
      word-break: break-word; /* 长单词/URL也能换行 */
      &:first-child {
        font-size: 14px;
        font-weight: 600;
        padding-bottom: 10px;
      }
      &:last-child {
        font-size: 12px;
        text-align: left;
        line-height: 15px;
      }
    }
  }
}
.advertising-rules {
  .el-radio-group {
    :deep(.el-radio-button__inner) {
      height: 90px;
    }
    .el-radio-button {
      width: 220px;
      height: 100px;
    }
  }
}
.set-rules-input {
  :deep(.el-input) {
    width: 166px !important;
  }
}
</style>
